<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/litewebchat.css" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="./index.css">
		<link rel="stylesheet" type="text/css" href="./css/main.css" />
		<!-- 引入组件库 -->
		<script src="./index.js"></script>
		<script src="./axios.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />


	</head>
	<body class="body_main">

			<el-container id="app" class="paper">
				<el-main>
					<!-- 主容器 -->
					<el-row :span="22">
						<div class="lite-chatbox">

							<div v-for="message in messageList" class="cmsg" v-bind:class="message.direction">

								<img class="headIcon radius" ondragstart="return false;" oncontextmenu="return false;" v-bind:src="['./img/avatar/'+message.avatar]" />
								<span class="name">{{ message.nick }}</span>
								<span class="content">{{ message.msg }}</span>
							</div>
						</div>
					</el-row>

				</el-main>
				<!-- <button onclick="addRecvMsg1()">复制文本</button> -->
			</el-container>
		
		<script type="text/javascript">


			var app = new Vue({
				el: '#app',
				data() {
					return {
						messageList: [],
						inputBox: '',
						botNick: '赤岛酱',
						thesaurus: '',
						theAiMsg: '',
						botAvatar: 'C.png',
						myAvatar: 'B.jpg'
					}
			
				},
				methods: {
					getThesaurus: function() {
					
						//axios.get('https://raw.githubusercontent.com/Kyomotoi/AnimeThesaurus/main/data.json')
						//	.then((response) => this.thesaurus = response.data)
					},
					send: function(msg_text) {
						this.messageList.push({
							nick: '你',
							msg: typeof msg_text !== 'undefined' ? msg_text : this.inputBox,
							direction: 'cright',
							avatar: this.myAvatar
						});

						setTimeout(() => {
							var div = document.getElementsByClassName('el-main')[0];
							div.scrollTop = div.scrollHeight;
							this.inputBox = '';
						}, 100)
					},
					push: function(msg_text) {
						this.messageList.push({
							nick: this.botNick,
							msg: msg_text,
							direction: 'cleft',
							avatar: this.botAvatar
						});
						
						setTimeout(() => {
							var div = document.getElementsByClassName('el-main')[0];
							div.scrollTop = div.scrollHeight;
							this.inputBox = '';
						}, 100)
					},
					clear: function() {
						this.messageList.splice(0, this.messageList.length);
						
						setTimeout(() => {
							var div = document.getElementsByClassName('el-main')[0];
							div.scrollTop = div.scrollHeight;
							this.inputBox = '';
						}, 100)
					}
				},
				created: function() {
					this.messageList.push({
						nick: this.botNick,
						msg: '你好呀',
						direction: 'cleft',
						avatar: this.botAvatar
					});
				}
			});
			
			function addMsg(msg)
			{
				app.send(msg);
			}
			
			function addRecvMsg(msg)
			{
				app.push(msg);
			}
			
			function clear()
			{
				app.clear();
			}
			
		</script>
</html>
